<template>
  <el-container>
    <el-aside :width="`${!isCollapse ? '300px' : '64px'}`">
      <el-menu
        :default-active="$route.path"
        :router="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
      >
        <div class="user-info" v-show="!isCollapse">
          <div
            class="icon"
            :style="`background:url(${userIcon});background-size:100%`"
          ></div>
          <div class="uname">{{ nickName }}</div>
        </div>
        <div
          class="user-info"
          style="width: 100%; height: 64px"
          v-show="isCollapse"
        >
          <div
            class="icon icon-collapse"
            :style="`background:url(${userIcon});background-size:100%`"
          ></div>
        </div>
        <el-menu-item index="/admin/home">
          <i class="el-icon-user"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="/admin/manage">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>管理列表</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/admin/manage/user">用户管理</el-menu-item>
            <el-menu-item index="/admin/manage/paper">试卷管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="top-bar">
        <i
          @click="isCollapse = !isCollapse"
          :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          style="font-size: 30px; margin-left: 20px; cursor: pointer"
        ></i>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(title, index) in breadList" :key="title"
            >{{ title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="user-info">
          <div
            class="icon"
            :style="`background:url(${userIcon});background-size:100% 100%`"
          ></div>
          <i class="el-icon-s-tools" @click="isShowUserInfo = !isShowUserInfo">
            <ul
              role="menu"
              class="el-menu"
              v-clickoutside="handleClickOutside"
              v-show="isShowUserInfo"
            >
              <li class="el-menu-item" @click="dialogVisible = true">
                我的资料
              </li>
              <li class="el-menu-item" @click="$store.dispatch('Logout')">
                退出
              </li>
            </ul>
          </i>
        </div>
      </el-header>
      <el-main><router-view></router-view></el-main>
    </el-container>
    <el-dialog
      v-show="dialogVisible"
      :close-on-click-modal="false"
      title="我的资料"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="头像：">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="upFile"
            :show-file-list="false"
          >
            <img
              v-if="form.avatarUrl"
              :src="$baseUrl + form.avatarUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名：" prop="nickName">
          <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="gender">
          <el-select v-model="form.gender" placeholder="请选择">
            <el-option label="男" value="1"> </el-option>
            <el-option label="女" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区：" prop="address">
          <el-cascader
            v-model="form.address"
            :options="options"
            placeholder=""
          ></el-cascader>
        </el-form-item>
        <el-form-item label="电话：" prop="telNumber">
          <el-input v-model="form.telNumber"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input
            v-model="form.password"
            :type="flag ? 'text' : 'password'"
            auto-complete="off"
          >
            <i
              slot="suffix"
              :class="flag ? 'el-icon-minus' : 'el-icon-view'"
              style="margin-top: 16px; font-size: 18px"
              autocomplete="auto"
              @click="flag = !flag"
            />
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import options from "@/utils/city";
import Clickoutside from "element-ui/src/utils/clickoutside";
import { upFile } from "@/api/login";
import { upUser } from "@/api/admin";
export default {
  directives: { Clickoutside },
  data() {
    return {
      isShowUserInfo: false,
      isCollapse: false,
      breadList: [],
      dialogVisible: false,
      form: {},
      flag:false,
      options,
      rules: {
        nickName: [
          { required: true, trigger: "blur", message: "请输入用户名" },
        ],
        gender: [{ required: true, trigger: "change", message: "请选择性别" }],
        address: [{ required: true, trigger: "change", message: "请选择地区" }],
        telNumber: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let reg = /^1[345789]\d{9}$/;
              if (!reg.test(value)) {
                callback(new Error("请确认手机号格式正确"));
              } else {
                callback();
              }
            },
          },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        confirmPassword: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请再次输入您的密码"));
              }
              if (value !== this.loginForm.password) {
                callback(new Error("请确认二次输入密码正确"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    nickName() {
      if (
        this.$store.getters.userInfo &&
        this.$store.getters.userInfo.nickName
      ) {
        return this.$store.getters.userInfo.nickName;
      }
    },
    userIcon() {
      if (
        this.$store.getters.userInfo &&
        this.$store.getters.userInfo.avatarUrl
      ) {
        return this.$baseUrl + this.$store.getters.userInfo.avatarUrl;
      }
    },
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  created() {
    this.form = {
      ...this.$store.getters.userInfo,
      address: this.$store.getters.userInfo.address.split("/"),
    };
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      this.breadList = this.$route.matched
        .map((item) => item.meta.title)
        .slice(1);
    },
    handleClickOutside() {
      this.isShowUserInfo = false;
    },
    async submit() {
      let params = {
        ...this.form,
        address: this.form.address.join("/"),
      };
      let valid = false;
      this.$refs["form"].validate((v) => (valid = v));
      if (!valid) return;
      let res = await upUser(params);
      this.$modal.msgSuccess(res.data.msg);
      this.$store.dispatch("GetUserInfo");
      this.dialogVisible = false;
    },
    async upFile({ file }) {
      let params = new FormData();
      params.append("upFile", file);
      let res = await upFile(params);
      this.$set(this.form, "avatarUrl", res.data.data.audioPath);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-container {
  height: 100%;
  width: 100%;

  .el-main {
    flex: 1;
  }
  .el-menu {
    height: 100%;
    border-right: none;
  }
  .el-aside {
    .user-info {
      transition: width 1s;
      width: 100%;
      height: 90px;
      background: rgb(84, 92, 100);
      .icon {
        margin: 20px 40px;
        width: 50px;
        height: 50px;
        float: left;

        border-radius: 3px;
      }
      .icon-collapse {
        width: 44px;
        height: 44px;
        margin: 10px;
        background-size: 100%;
      }
      .uname {
        float: right;
        width: 170px;
        height: 100%;
        line-height: 90px;
        font-size: 20px;
        color: #fff;
      }
    }
  }
  .top-bar {
    display: flex;
    align-items: center;
    height: 80px !important;
    padding: 0;
    border-bottom: 1px solid #dcdfe6;
    .el-breadcrumb {
      flex: 1;
      margin-left: 20px;
    }
    .user-info {
      display: flex;
      .icon {
        width: 50px;
        height: 50px;
        background: url(@/assets/images/user-icon.png);
        background-size: 100%;
        border-radius: 3px;
      }
      .el-icon-s-tools {
        position: relative;
        cursor: pointer;
        margin: 28px 10px 0;
        font-size: 20px;
        .el-menu {
          user-select: none;
          width: 140px;
          position: absolute;
          top: 25px;
          left: -120px;
          z-index: 999;
          .el-menu-item {
            height: 40px;
            line-height: 40px;
            color: rgb(255, 255, 255);
            background-color: rgb(84, 92, 100);
            &:hover {
              background: rgb(67, 74, 80);
            }
          }
        }
      }
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>